<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition>


        <h:form id="EspecialidadPrimariaCreateForm">

            <p:panel header="Estudios Primarios" footer="Nota: Sobre la educacion primaria ingrese la escula donde haya culminado sus estudios" style="border: none; margin-top: -10px;" >
                <h:panelGroup id="display" style="width: 500px; height: 800px;">
                    #{estudiosPrimariaController.iniciaSelected()}
                    <h:panelGrid columns="4" 
                                 border="0" 
                                 cellpadding="0"
                                 columnClasses="column1Class, column2Class,column3Class, column4Class">
                        <p:outputLabel for="colegio" value="#{bundleEtiquetasES.Institucion}"  />
                        <p:selectOneMenu id="colegio" 
                                         value="#{estudiosPrimariaController.selected.escuela}" 
                                         converter="#{escuelaConverter}"
                                         panelStyle="width:180px"
                                         effect="fade"
                                         var="t" 
                                       
                                         style="width:235px" 
                                         filter="true" 
                                         filterMatchMode="startsWith">
                            <f:selectItem itemLabel="Selecione"/>
                            <f:selectItems value="#{escuelaController.itemsAvailableSelectOne}"
                                           var="theme"
                                           itemLabel="#{theme.nombre}"
                                           itemValue="#{theme}"/>

                            <p:column>
                                <h:outputText value="#{t.nombre}" />
                            </p:column>
                            <p:ajax event="change"
                                    update="otra"
                                    listener="#{estudiosPrimariaController.limpiarNombreEscuala()}"/>
                        </p:selectOneMenu>
                        <p:outputLabel value="OTRA INSTITUCION:" for="otra"/>
                        <p:inputText id="otra"
                                     styleClass="inputText" 
                                     value="#{estudiosPrimariaController.nombre}"
                                     onkeyup="value = value.toUpperCase()"
                                     >
                            <p:ajax event="keyup"
                                    update="colegio"
                                    listener="#{estudiosPrimariaController.limpiarEscuala()}"
                                    />
                        </p:inputText>

                        <p:outputLabel value="TIEMPO DE ESTUDIO:" for="anio"/>
                        <p:inputText id="anio"
                                     required="true"
                                     styleClass="inputText" 
                                     value="#{estudiosPrimariaController.selected.duracion}"/>

                    </h:panelGrid>
                    <div style="margin-left: 40%; margin-bottom: 20px; margin-top: 30px;">
                        <p:commandButton actionListener="#{estudiosPrimariaController.guardarEscuela}" icon="ui-icon-disk" ajax="false"  value="GUARDAR"/>
                        <p:commandButton value="ELIMINAR" actionListener="#{estudiosPrimariaController.eliminar(event)}" ajax="false" icon="ui-icon-closethick"/>

                    </div>
                </h:panelGroup>
            </p:panel>
        </h:form>

    </ui:composition>
</html>
